<template>
    <div
      v-loading="loading"
      class="RainInfoBox"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.3)"
    >
      <div class="rainInfo_top">
        <div style="margin-bottom:16px">
          <div>
              <div>
                  <span>站名</span><span>{{ infoRainList.st.stnm || '&nbsp;' }}</span>
              </div>
            </div>
            <div>
              <div>
                  <span>行政区划</span><span>{{ infoRainList.st.fulladdvnm || '&nbsp;' }}</span>
              </div>
            </div>
            <div>
              <div>
                  <span>站址</span> <span>{{ infoRainList.st.stlc || '&nbsp;' }}</span>
              </div>
            </div>
            <div>
              <div>
                  <span>累计雨量</span><span style="font-family:'Number"> {{ infoRainList.maxP || 0 }}mm </span>
              </div>
            </div>
        </div>
        <div>
          <span style="color: #A5C2D8;font-size:14px;margin-right:10px">时间 </span><span>
            <el-date-picker
              v-model="TimeRainDlg"
              type="datetimerange"
              start-placeholder="开始日期"
              range-separator="至"
              end-placeholder="结束日期"
              style="width: 80%"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :default-time="[timebeg, timebeg]"
              @change="selectTime"
              prefix-icon="el-icon-date"
            />
          </span>
        </div>
  
        <div class="rainInfo_top_btn_span">
          <p class="zhadiobtn">
            <el-radio-group v-model="adioBtnSpan" @change="handleClickRain">
              <el-radio label="">默认</el-radio>
              <el-radio label="3">3天</el-radio>
              <el-radio label="7">7天</el-radio>
              <el-radio label="10">10天</el-radio>
            </el-radio-group>
          </p>
        </div>
        <div style="transform: translateX(60px);min-width:180px;">
            <el-select v-model="siteName" style="width:100%" @change="handleselectClick">
             <el-option
               v-for="item in sitelist"
               :key="item.stcd"
               :label="item.stnm"
               :value="item.stcd"
             />
           </el-select>
       </div>
      </div>
      <div class="rainInfo_center">
        <div class="subtitle">雨量过程图</div>
        <el-row class="tableEchatrsdiv">
          <el-col :span="18" class="tableEchatrsdiv">
            <div class="grid-content bg-purple">
              <div class="demoEccharts">
                <div  v-if="!flag" class="imgcenter" style="width:100%;text-align:center;">
                    <img src="@/assets/dialog/NoDataicon.png"  width="90" height="100">
                </div>
                <Newecharts id="demo" v-if="flag && chartflg" style="height:100%" :option="ChartTestData" />
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="tableEchatrsdiv listTables">
            <div class="grid-content bg-purple-light" style="height:100%">
              <el-table :data="tableData" style="width: 100%;height:100%">
                <template slot="empty" >
                    <img width="84" height="100"  src="@/assets/dialog/NoDataicon.png" alt="">
                </template>
                <el-table-column prop="tm" align="center" label="时间" />
                <el-table-column prop="p" align="center" label="时段降雨(mm)" />
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="subtitle">最大雨量(mm)</div>
            <div class="rainLimitWrap">
              <!-- <div class="rainFlag">最大<br>雨量<br>(mm)</div> -->
              <div class="flagTableDiv">
                <div>
                  <span
                    v-for="(item, indnx) in listTimeName"
                    :key="indnx"
                    :label="item"
                    style="border-bottom: 1px solid #4285A6;border-left: 1px solid #4285A6;"
                  >{{ item }}</span>
                </div>
                <div>
                  <!-- <div v-show="rangeMaxDrp.length" style="height:100%;border-top: 1px solid #4285A6;border-left: 1px solid #4285A6;" v-for="(itemChlid, indexC) in rangeMaxDrp" :key="indexC">
                    <span>{{ itemChlid.p ? itemChlid.p + 'mm' : '&nbsp;' }}</span>
                    <span class="tag" :class="'mainTextLevel' + itemChlid.rank">{{itemChlid.mainText ? itemChlid.mainText : '&nbsp;' }}</span><br>
                    <span>{{ itemChlid.tm ? itemChlid.tm : '&nbsp;' }}</span>
                  </div> -->
                  <div v-show="rangeMaxDrp.length" style="height:100%;border-left: 1px solid #4285A6;" v-for="(itemChlid, indexC) in rangeMaxDrp" :key="indexC">
                    <span>{{ itemChlid.p ? itemChlid.p + 'mm' : '&nbsp;' }}</span>
                    <span class="tag" :class="'mainTextLevel' + itemChlid.rank">{{itemChlid.mainText ? itemChlid.mainText : '&nbsp;' }}</span><br>
                    <span>{{ itemChlid.tm ? itemChlid.tm : '&nbsp;' }}</span>
                  </div>
                  <!-- <div  v-show="rangeMaxDrp.length" v-for="i in 4 "  :key="i">
                    <div v-if="i <= rangeMaxDrp.length" style="height:100%;border-left: 1px solid #4285A6;" v-for="(itemChlid, indexC) in rangeMaxDrp" :key="indexC">
                        <span>{{ itemChlid.p ? itemChlid.p + 'mm' : '&nbsp;' }}</span>
                        <span class="tag" :class="'mainTextLevel' + itemChlid.rank">{{itemChlid.mainText ? itemChlid.mainText : '&nbsp;' }}</span><br>
                        <span>{{ itemChlid.tm ? itemChlid.tm : '&nbsp;' }}</span>
                    </div>
                    <div v-else style="height:100%;border-left: 1px solid #4285A6;">
                        <span>&nbsp;</span><br>
                        <span class="tag">{{'&nbsp;'}}</span><br>
                        <span>&nbsp;</span>
                    </div>
                  </div> -->
                  <div v-show="!rangeMaxDrp.length" style="width:100%;text-align:center;border-left: 1px solid #4285A6;">
                    <img src="@/assets/dialog/NoDataicon.png"  width="50" height="50">
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 44px;">
        <div class="subtitle" >重现期雨量情况</div>
        <el-row class="rainLimitTableWrap" :gutter="1">
          <el-col :span="24">
            <el-table border class="flagTable " :data="reappearDataLeft" size="mini">
              <template slot="empty" >
                <img width="50" height="50" style="transform: translateY(14px);" src="@/assets/dialog/NoDataicon.png" alt="">
              </template>
              <el-table-column align="center" prop="title" label="重现期" />
              <el-table-column align="center" prop="m60" label="1小时" />
              <el-table-column align="center" prop="m180" label="3小时" />
              <el-table-column align="center" prop="m360" label="6小时" />
              <el-table-column align="center" prop="m1440" label="24小时" />
              <el-table-column align="center" prop="title_1" label="重现期" />
              <el-table-column align="center" prop="m60_1" label="1小时" />
              <el-table-column align="center" prop="m180_1" label="3小时" />
              <el-table-column align="center" prop="m360_1" label="6小时" />
              <el-table-column align="center" prop="m1440_1" label="24小时" />
              
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  <script>
  import Newecharts from './newecharts.vue'
  import  * as echarts from 'echarts'
  import {
      GetRainInfo,
      GetStcdByAdcd
  } from '@/api/xuna.js'
  import moment from 'moment'
  export default {
      components: {
          Newecharts
      },
      props: ['selectnum'],
      data() {
          return {
              flag:false,
              rainTimeRadio: '60', // 累计雨量参数 选择时间 1小时 3小时 一天
              TimeRainDlg: '',
              parameter: '',
              TimeRain: '',
              adioBtnSpan: '',
              timebeg: this.$moment().format('HH:mm:ss'),
              tableData: [],
              infoRainList: {
                  st: {
                      stnm: '',
                      stlc: '',
                      fulladdvnm: '',
                      MaxP: '0'
                  }
              },
              rangeMaxDrp: [],
              listTimeName: ['1小时', '3小时', '6小时', '24小时'],
              reappearDataLeft: [],
              ChartTestData: {},
              loading: false,
              timeIntervalRainData: [], // 时段降雨数据
              siteName:'',
              sitelist:[],
              chartflg:true,
              originalDate:[],
          }
      },
      created() {
          const getRainParmas = this.$store.getters.dlgParams.params
          this.parameter = getRainParmas
          console.log('parameter', this.parameter)
          this.TimeRainDlg = [this.parameter.strBegin || this.parameter.rainStart || '', this.parameter.strEnd || this.parameter.rainEnd || '']
          this.originalDate = [this.parameter.strBegin || this.parameter.rainStart || '', this.parameter.strEnd || this.parameter.rainEnd || '']
          if(this.parameter.Ewcode){
             this.getsitlist();
           }
        //    console.log("数据村",this.parameter)
        //   console.log("数据村Stcd",this.parameter.Stcd)
        //    if(!this.parameter.Stcd){
        //     this.loading=false
        //   } 自加
            //   this.getData()
      },
      methods: {
          handleRisz(){
            if(!this.loading){//判断是否请求完数据
          //    this.ChartTestData =  this.ChartTestData;
               this.chartflg = false;
               this.$nextTick(() => {
                 this.chartflg = true;
               });
            };
          },
          handleselectClick(){//站点切换
            if(!this.parameter.Stcd){
                this.parameter.Stcd = this.siteName;
                this.getData();
            }else{
                this.parameter.Stcd = this.siteName;
                this.getData();
            }
            
          },
          getsitlist(){
            let that  = this;
            let param = {
                  'Addvcd':this.parameter.Ewcode
            }
            GetStcdByAdcd(param).then((res) => {
                // console.log('parameter的Ewcode',param);
                if(res.isSuccess){
                    let dat = res.data
                    this.sitelist = dat;
                    this.siteName = dat.length?dat[0].stcd:'';
                    // console.log('根据parameter的Ewcode查Stcd',res);
                }else{
                  this.sitelist = []; 
                }
                this.handleselectClick();
            }).catch(err=>{
                
            })
          },
          handleClickRain(val) {
              this.adioBtnSpan = val
              if (val !== '') {
                  let endtime = this.parameter.strEnd || this.parameter.rainEnd;
                  const timeT = this.$moment(endtime).subtract(val, 'day').format('YYYY-MM-DD HH:mm')
                  this.parameter.strBegin = timeT
                  // this.selectTime([timeT, this.parameter.strEnd]);
                  this.selectTime([timeT, endtime || this.TimeRainDlg[1]])
              } else {
                    this.TimeRainDlg =this.originalDate
                  this.getData()
              }
          },
          // 自定义时间
          selectTime(val) {
              // console.log(val)
              if (val) {
                  this.parameter.strBegin = val[0]
                  this.parameter.strEnd = val[1]
                  this.TimeRainDlg = val
                  this.getData()
              } else {
                  this.parameter.strBegin = ''
                  this.parameter.strEnd = ''
              }
          },
          // 根据快速选择时间判断显示值
          rainTimeRadioChange() {
              this.getDrpByStcd() // 刷新echart图表
              this.getMaxDrpByIntvList() // 刷新最大雨量表格
          },
          // 获取参数
          getData() {
              this.loading = true
              const param = {
                  dtBegin: this.parameter.strBegin || this.parameter.rainStart || '2021-06-08',
                  dtEnd: this.parameter.strEnd || this.parameter.rainEnd || '2021-06-11',
                  Stcd: this.parameter.stcd || this.parameter.Stcd || '41135890',
                  Step: this.parameter.Step || '60'
              }
              GetRainInfo(param).then((res) => {
                  this.loading = false
                  if (res.isSuccess) {
                      this.infoRainList = res.data
                    //   console.log('infoRainList: ', res.data);
                      this.tableData = [...res.data.lstRv].map(function(v) {
                          return {
                              p: v.p,
                              // tm: v.tm.replace(/T/g, ' ')
                              tm: moment(v.tm).format('YYYY-MM-DD HH:mm')
                          }
                      })
                      this.rangeMaxDrp = [...res.data.rangeMaxDrp].map(function(v) {
                          return {
                              ...v,
                              tm: moment(v.tm).format('YYYY-MM-DD HH:mm')
                          }
                      })
  
                      const arrData = [{
                          title: '5年一遇',
                          title_1: '50年一遇'
                      },
                      {
                          title: '10年一遇',
                          title_1: '100年一遇'
                      },
                      {
                          title: '20年一遇',
                          title_1: '历史最大值'
                      }
                      ]
                      res.data.lstDr.forEach(function(v, i) {
                          const key = 'm' + v.intv
                          arrData[0][key] = v.five != null ? Math.round(v.five, 1)+'mm' : ''
                          arrData[1][key] = v.ten != null ? Math.round(v.ten, 1)+'mm' : ''
                          arrData[2][key] = v.twenty != null ? Math.round(v.twenty, 1)+'mm' : ''
                          arrData[0][key + '_1'] = v.fifty != null ? Math.round(v.fifty, 1)+'mm' : ''
                          arrData[1][key + '_1'] = v.hundred != null ? Math.round(v.hundred, 1)+'mm' : ''
                          arrData[2][key + '_1'] = v.maxP ? Math.round(v.maxP, 0)+'mm' : '/'
                          arrData[2]['mxtm'] = v.mxtm ? '(' + moment(v.mxtm).format('yyyyMMdd') + ')'
                              : ''
                      })
                      this.reappearDataLeft = arrData.filter((item,index)=>index != 2)  //只展示俩
                      console.log('数据',this.reappearDataLeft);
                    //   console.log('数据lstRv',res.data.lstRv);
                      if(res.data.lstRv.length>0){
                        this.getRainEchart(res.data.lstRv, this.adioBtnSpan)
                      }else{
                        this.flag=false
                      }
                      
                  }
              }).catch(err=>{
                 this.loading = false
              })
          },
  
          getRainEchart(list, adioBtnSpan) {
            this.flag=true
              const lst = list
              const ljData = []
              const jyData = []
              const xData = []
              var jyMax = 0
              let oldxdt = ''
              lst.map((v, index) => {
                  jyData.push(v.p)
                  ljData.push(v.sumDrp)
                  xData.push(v.tm.replace(/T/g, ' '))
              })
              if (jyData.length > 0) {
                jyMax = Math.max(...jyData);
            }
              // console.log(list)
              this.ChartTestData = {
  
                  tooltip: {
                    backgroundColor: 'rgba(2, 0, 31,0.65)',
                    borderColor: '#333',
                      trigger: 'axis',
                      axisPointer: {
                          crossStyle: {
                              color: '#999'
                          }
                      },
                    textStyle: {
                        color: '#fff'
                    }
                  },
                  // title: {
                  //     margin: 0,
                  //     verticalAlign: 'top',
                  //     useHTML: true,
                  //     text: list.length > 0 ? '雨量过程图' : '无数据',
                  //     x: list.length > 0 ? 20 : 'center',
                  //     y: list.length > 0 ? 0 : 'center',
                  //     textStyle: {
                  //         color: '#fff',
                  //         fontSize: '12px'
                  //     }
                  // },
                  grid: {
                      x: 55,
                      y: 55,
                      x2: 45,
                      y2: 35
                  },
                  legend: {
                      // x2: 95,
                      // y: 10,
                      data: ['雨量(mm)', '累计雨量(mm)'],
                      textStyle: {
                          fontSize: 12,
                          color: '#fff'
                      }
                  },
                  xAxis: {
                      interval: 0, // 步长
                      type: 'category',
                      data: xData,
                      axisPointer: {
                          type: 'shadow'
                      },
                      minInterval: 3600 * 1.5 * 1000,
                      axisLabel: {
                          textStyle: {
                              color: function(value, index) {
                                  // 判断是否是日 用特殊字体颜色
                                  if (value != undefined && value != '' && value != null) {
                                      if (index == 0) {
                                          return '#fff'
                                      } else if (index > 0) {
                                          if (
                                              xData[index - 1].split(' ')[0].split('-')[2] !==
                                                  xData[index].split(' ')[0].split('-')[2]
                                          ) {
                                              return '#fff'
                                          } else {
                                              return '#ddd'
                                          }
                                      }
                                  }
                              }
                          },
                          fontSize: 11,
                          // interval: 0, // 步长
                          formatter: function(value, index) {
                              if (value != undefined && value != '' && value != null) {
                                  if (index > 0) {
                                      // if (adioBtnSpan >= 3) {
                                      //     const timeDay = xData[index].split(' ')[1]
                                      //    // console.log(timeDay);
                                      //    // console.log(index)
                                      //      return moment(xData[index]).format('DD日 HH:mm')//2023-7-3
  
                                      // if (timeDay == '18:00:00' || timeDay == '06:00:00' || timeDay == '12:00:00') {
                                      //     return moment(xData[index]).format('HH:mm')
                                      // } else if (xData[index - 1].split(' ')[0].split('-')[2] != xData[index].split(' ')[0].split('-')[2]) {
  
                                      //     return moment(xData[index]).format('DD日')
                                      // } else {
                                      //     return ''
                                      // }
                                      // } else {
                                      if (index > 1) {
                                          if (moment(xData[index]).format('DD日') != oldxdt) {
                                              oldxdt = moment(xData[index]).format('DD日')
  
                                              return moment(xData[index]).format('DD日')
                                          } else {
                                              oldxdt = moment(xData[index]).format('DD日')
                                              return moment(xData[index]).format('HH:mm')
                                          }
                                          // if (((xData.length - 1) / 24) > 2 && ((xData.length - 1) / 24) <
                                          // 		5) {
                                          //       if(moment(xData[index]).format('DD日')!=oldxdt){
                                          //              oldxdt = moment(xData[index]).format('DD日');
  
                                          //          return moment(xData[index]).format('DD日')
                                          //        }else{
                                          //               oldxdt = moment(xData[index]).format('DD日');
                                          //             return moment(xData[index]).format('HH:mm')
                                          //        }
                                          //     if (index % 8 == 0) {
                                          //         if (xData[index - 1].split(' ')[0].split('-')[2] != xData[
                                          //             index].split(' ')[0]
                                          //             .split(
                                          //                 '-')[2]) {
                                          //             return moment(xData[index]).format('DD日')
                                          //         } else {
                                          //             return moment(xData[index]).format('hh:mm') // 去掉时
                                          //         }
                                          //     } else {
                                          //      //  console.log(xData[index])
                                          //       return moment(xData[index]).format('DD日')
                                          //     }
                                          // } else if (((xData.length - 1) / 24) >= 5) {
                                          //     if (index % 4 == 0) {
                                          //         if (xData[index - 1].split(' ')[0].split('-')[2] != xData[
                                          //             index].split(' ')[0]
                                          //             .split(
                                          //                 '-')[2]) {
                                          //             return moment(xData[index]).format('DD日')
                                          //         } else {
                                          //             return moment(xData[index]).format('DD日')
                                          //         }
                                          //     } else {
                                          //         return moment(xData[index]).format('hh:mm')
                                          //     }
                                          // } else {
                                          //     if (index % 4 == 0 || xData.length < 12) {
                                          //         // 4的倍数
                                          //         if (
                                          //             xData[index - 1].split(' ')[0].split('-')[2] ==
                                          // 				xData[index].split(' ')[0].split('-')[2]
                                          //         ) {
                                          //             // 如果前后相等 则是同一天
                                          //             if (xData[index].split(' ')[1] == '01:00') {
                                          //                 return ''
                                          //             } else {
                                          //                 return xData[index].split(' ')[1].split(':')[
                                          //                     0] // 去掉时
                                          //             }
                                          //         } else {
                                          //             // 如果前后不相等 则不是同一天
                                          //             return moment(xData[index]).format('DD日')
                                          //         }
                                          //     } else {
                                          //         if (
                                          //             xData[index - 1].split(' ')[0].split('-')[2] !==
                                          // 				xData[index].split(' ')[0].split('-')[2]
                                          //         ) {
                                          //             return moment(xData[index]).format('DD日')
                                          //         }
                                          //         return moment(xData[index]).format('hh:mm')
                                          //     }
                                          // }
                                      } else {
                                          oldxdt = moment(xData[index]).format('DD日')
                                          return moment(xData[index]).format('HH:mm')
                                      }
                                      // }
                                  } else {
                                      oldxdt = moment(xData[index]).format('DD日')
                                      const dateRetuen = moment(value).format('HH:mm') + '\n' + moment(value)
                                          .format('YYYY-MM-DD')
                                      return dateRetuen
                                  }
                              } else {
                                  return ''
                              }
                          }
                      }
                  },
                  yAxis: [{
                      type: 'value',
                      name: '雨量mm',
                      axisLine: {
                          show: true,
                          lineStyle: {
                              color: '#009bd5'
                          }
                      },
                      splitLine: {
                          lineStyle: {
                              color: ['#99999959'],
                              width: 1,
                              type: 'dashed'
                          }
                      },
  
                      axisTick: {
                          show: false,
                          lineStyle: {
                              color: 'red'
                          }
                      },
                      axisLabel: {
                          formatter: '{value}'
                      },
                      labels: {
                          align: 'left',
                          x: -8,
                          y: 5,
                          style: {
                              color: '#009bd5'
                          }
                      },
                      min: 0,
                      max: jyMax
                  },
                  {
                      type: 'value',
                      name: '累计雨量mm',
                      nameTextStyle: {
                          color: '#fff'
                      },
                      axisLine: {
                          show: true
                      },
                      axisLabel: {
                          formatter: '{value}',
                          textStyle: {
                              color: '#fff'
                          }
                      },
                      splitLine: {
                          lineStyle: {
                              color: ['rgba(0,0,0,.2)'],
                              width: 1,
                              type: 'dashed'
                          }
                      },
                      labels: {
                          align: 'right',
                          x: -8,
                          y: 5,
                          style: {
                              color: '#bb00ff'
                          }
                      },
                      min: 0,
                      max: ljData[ljData.length - 1]
                  }
                  ],
                  series: [{
                      name: '雨量(mm)',
                      type: 'bar',
                      color: '#009bd5',
                      barCategoryGap: '0%',
                      barWidth: '90%',
                      itemStyle: {
                              normal: {
                                  // 渐变了
                                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                      { offset: 0, color: '#00E4FF' },
                                      { offset: 1, color: '#0039BB' }
                                    ])
                              }
                          },
                      tooltip: {
                          valueFormatter: function(value) {
                              return value + 'mm'
                          }
                      },
                      data: jyData
                  },
  
                  {
                      name: '累计雨量(mm)',
                      type: 'line',
                      color: '#dcef4e',
                      yAxisIndex: 1,
                      tooltip: {
                          valueFormatter: function(value) {
                              return value + 'mm'
                          }
                      },
                      data: ljData
                  }
                  ]
              }
          },
          xAxisFormatterFn(thisData) { // thisData当前x轴的刻度值
              console.log(thisData)
              if (thisData.isFirst) { // 格式化x轴时间格式
                  if (thisData.axis.dataMin == thisData.value) {
                      if (moment(thisData.value).format('hh:mm') == '00:00') {
                          return '<span style="color:#2727d4">' + moment(thisData.value).format('dd日') + '</span>'
                      } else {
                          return '<span style="color:#2727d4">' + moment(thisData.value).format('M月D日 hh:mm') + '</span>'
                      }
                  } else {
                      if (moment(thisData.axis.dataMin).format('hh:mm') == '00:00') {
                          return '<span style="color:#2727d4;margin-right:5px;">' + moment(thisData.axis.dataMin).format(
                              'dd日') + '</span>' + '<span style="color:#2727d4">' + moment(thisData.value).format(
                              'dd日') + '</span>'
                      } else {
                          return '<span style="color:#2727d4;margin-right:5px;">' + moment(thisData.axis.dataMin).format(
                              'M月D日 hh:mm') + '</span>' + moment(thisData.value).format('hh')
                      }
                  }
              } else {
                  if (moment(thisData.value).format('hh:mm') == '00:00') {
                      return '<span style="color:#2727d4">' + moment(thisData.value).format('dd日') + '</span>'
                  } else {
                      return moment(thisData.value).format('hh')
                  }
              }
          }
      }
  }
  </script>
  <style lang="less" scoped>
      .RainInfoBox {
          height: max-content;
          overflow: hidden;
          
  
      }
      .rainInfo_top {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-top: 10px;
          &>:nth-child(1){
              width: 100%;
              box-sizing: border-box;
              display: flex;
              background: rgba(0,165,233,0.3);
              padding: 10px 0 ;
              font-size: 14px;
              >div{
                  box-sizing: border-box;
                  flex: 1;
                  color: #fff;
                  border-left: 1px solid #4285A6;
                  padding-left:10px ;
                  >div{
                      background: url(../../assets/newimg/矩形.png) no-repeat left center;
                      background-size: auto 66%;
                      &>:nth-child(1){
                          color: #A5C2D8;
                          margin-bottom: 4px;
                      }
                      span {
                          color: #fff;
                          display: block;
                          text-indent: 14px;
                      }
                  }
              }
              &>:nth-child(1){
                  border: none;
              }
          }
          >div:nth-child(2){
              width: 31%;
          }
          >div:nth-child(3){
              width: 40%;
              text-indent: 30px;
              text-align: left;
          }
          .rainInfo_top_btn_span {
              span {
                  background-color: #102065;
                  color: #fff;
                  border-color: #1e2f74;
              }
          }
      }
  
      .rainInfo_center {
          height:auto;
          max-height: 390px;
          // padding-bottom: 10px;
  
      .demoEccharts{
          height:240px;
      }
      .tableEchatrsdiv{
          height: 240px;
      }
      .tableEchatrs{
          height: 100% !important;
      }
      }
  
      .rainFlag {
          width: 70px;
          height: 70px;
          background: #0E5185;
          border-right: 0;
          color: #fff;
          font-size: 14px;
          margin-right: 1px;
          padding-top: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
      }
  
      /deep/ .rainLimitWrap {
          display: flex;
          // height: 80px;
      }
      /deep/ .rainLimitWrap .el-col:nth-child(1) {
          width: 27px;
          margin-left: 10px;
      }
      .flagTable /deep/{
        //height: 110px;
     
      }
      .flagTable /deep/ .has-gutter{
          color: #21DDFF !important;
        }
        
        .rainLimitTableWrap /deep/  tr .el-table__cell{
            border-top:none !important;
        }
        .listTables /deep/ .el-table .el-table__body-wrapper{
            //height: calc(100% - 38px) ;
        }
        .listTables /deep/ .el-table tbody tr{
            background: rgba(0,150,255,0.3);
        }
        /deep/ .el-date-editor{
            border: solid 1px #1E73DC;
        }
        /deep/  tr .el-table__cell{
            border-top:none !important;
        }
 
        /*行间隙*/
        .listTables /deep/ .el-table__body{
            -webkit-border-vertical-spacing: 7px;  // 垂直间距
        }
      /deep/ .villageWrap .el-table__footer tr .cell,
      /deep/ .rainLimitTableWrap .flagTable .el-table__body tr .cell {
          height: 15px;
          line-height: 15px;
      }
      .flagTable /deep/ .el-table .el-table__header-wrapper{
          margin: 0 !important;
      }
      /deep/ .el-table {
        border:0 !important;
      }
      .rainLimitWrap .flagTable {
          display: inline-block;
      }
  
      .flagTableDiv {
          width: 100%;
          height: 90px;
          overflow: hidden;
          border-right: 0;
          color: #fff;
          font-size: 14px;
          //border: 1px solid #4285A6;
          border-top: 1px solid #4285A6;
          border-bottom: 1px solid #4285A6;
          border-right: 1px solid #4285A6;
          >div {
              display: flex;
              justify-content: space-between;
              align-items: center;
   
  
              &:nth-child(1) {
                  color: #21DDFF;
                  height: 35px;
                  line-height: 35px;
                  background-color: rgba(0,150,255,0.3);;
              }
  
              &:nth-child(2) {
                  height: 60px;
                  line-height: 27px;
                  background: rgba(0,100,178,0.05);
  
                  .tag{
                      border-radius: 4px;
                      padding: 0 12px;
                  }
              }
  
              >span,
              >div {
                  display: inline-block;
                  width: 25%;
                  text-align: center;
  
                  >span {
                      color: #fff;
                      padding: 1px;
                      margin: 0 5px;
                  }
              }
          }
      }
      .rainLimitTableWrap /deep/.el-table--border .el-table__cell{
          border-left: 1px solid #4285A6 !important;
      }
      .rainLimitTableWrap /deep/ .el-table__header-wrapper{
          margin-bottom: 0 !important;
          border-right:1px solid #4285A6;
      }
      .rainLimitTableWrap /deep/ .el-table__body-wrapper{
          border-right:1px solid #4285A6;
      }
      .rainLimitTableWrap /deep/ .el-table tr .el-table__cell{
          border-bottom: 1px solid #4285A6 !important;
      }
      .rainLimitTableWrap /deep/ .el-table tbody tr{
          background: transparent !important;
      }
  
      .rainLimitTableWrap /deep/ .el-table__row>:nth-child(1),.rainLimitTableWrap /deep/ .el-table__row>:nth-child(6){
          background: rgba(0, 150, 255, 0.3) !important;
      }
       .rainLimitTableWrap /deep/ .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed{
          border-color: transparent;
      }
      .mainTextLevel1 {
          background: #09a847;
      }
  
      .mainTextLevel2 {
          background: #0269ba;
      }
  
      .mainTextLevel3 {
          background: #CBCB1E;
      }
  
      .mainTextLevel4 {
          background: #febc1f;
      }
  
      .mainTextLevel5 {
          background: #fc2229;
      }
  
      .mainTextLevel6 {
          background: #6e339d;
      }
  
      .el-table--border::after {
          background-color: #14275b;
      }
       /deep/.zhadiobtn{
            .el-radio{
              display:inline-block;
              }
  
       }
  </style>
  <style lang="less" >
   .listTables{
       .el-table{
           th {
              .cell {
              color: #fff;
              }
           }
       }
  
   }
   .bg-purple-light /deep/{
      background: #001944;
      padding: 8px 8px 0;
      .el-table__row{
          margin-bottom: 6px !important;
      }
   }
  /deep/.el-table .el-table__header-wrapper{
      background: red !important;
      border-radius: 0 !important;
      margin: 0 !important;
  }
  .subtitle{
      height: 28px;
      line-height: 0px;
      margin: 20px 0 4px 0;
      text-indent: 4px;
      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #FFFFFF;
      background: url(../../assets/dialog/dialogBT.png) no-repeat center;
      background-size: 100% 100%;
  }
  .rainLimitTableWrap /deep/ .el-table__empty-text{
    line-height: 0px;
  }

  .rainLimitTableWrap{
    border: solid 1px #4285A6 !important;
}

.imgcenter{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
  </style>
  
  